<template>
<div>
    <table>
      <num is="num" v-for="(item,index) in goodsArr" :key="index" :obj="item" :index="index" >  
      </num>
    </table>
    <div>All Number:{{numFn}}</div>
</div>
</template>
 

<script>
import num from "./components/num"
export default {
    components: {
        num
    },
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
    };
  },
  computed: {
      numFn(){
       return this.goodsArr.reduce( (sum,obj) => sum+= obj.count*1,0)
     }
  } 
};
</script>

<style>
</style>